<template>
  <div class="container-xl">
    <div class="row">
      <router-link
        v-slot="{ href }"
        :custom="true"
        :to="{ name: 'logs', query: { teamid: data.ID } }"
      >
        <a class="col core core1" :href="href" target="_bank">
          查看组员行为数据
        </a>
      </router-link>
      <router-link
        v-slot="{ href }"
        :custom="true"
        :to="{ name: '答题记录', query: { teamid: data.ID } }"
      >
        <a class="col core core2" target="_blank" :href="href"
          >查看题目评测数据</a
        >
      </router-link>
    </div>
    <div class="row">
      <!-- <router-link
        v-slot="{ href }"
        :custom="true"
        :to="{ name: '团队数据图标', params: { ID: data.ID } }"
      >
        <a class="col core core3" :href="href" target="_bank">
          查看团队整体详情
        </a>
      </router-link> -->
      <!-- <div class="col core core2">查看团队整体详情</div> -->
    </div>
  </div>
</template>


<script lang="ts">
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "teamdata",
  props: {
    data: {
      type: Object as PropType<Studycodemodel.Iteam>,
    },
  },
  setup() {},
});
</script>

<style scoped>
.core {
  height: 180px;
  background-position-x: right;
  background-position-y: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 48px;
}
.core1 {
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/HGKJ_OJ_1.0_tuanduiyemian_chaka.png);
  margin-right: 12px;
}

.core2 {
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/HGKJ_OJ_1.0_tuanduiyemian_chaka_1.png);
  margin-left: 12px;
}

.core3 {
  background-color: rgb(69, 69, 69);
}
.core {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.3s;
  border-radius: 2px;
}
.core:hover {
  color: #fff;
  box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1),
    0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
}
.row {
  margin-bottom: 24px;
}
</style>